<template>
  <components :is="currentComponent" class="data-v-loading" :color="color" :percentage="percentage"></components>
</template>

<script>
import loading1 from "./loading1";
import loading2 from "./loading2";
import loading3 from "./loading3";
import loading4 from "./loading4";
import loading5 from "./loading5";
import loading6 from "./loading6";
export default {
  name: "data-v-loading",
  props: {
    type: {
      type: [Number, String],
      default: 1
    },
    percentage: {
      type: [Number, String],
      default: 0
    },
    color: {
      type: String,
      default: "#fff"
    }
  },
  components: {
    loading1,
    loading2,
    loading3,
    loading4,
    loading5,
    loading6,
  },
  computed: {
    currentComponent() {
      return "loading" + this.type;
    }
  }
};
</script>
<style lang="less">
.data-v-loading {
}
</style>
